<script setup lang='ts' name="member-level">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { getMemberLevelList, memberLevelHttp, memberLevelUpdateStatus } from '@fl/api/anjutong'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard, ElCol, ElRow } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { nextTick, ref } from 'vue'

import type { IRowV0 } from './types'

import AddItem from './component/add.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { btns, gridOptions } = useTable()
const { form, schema } = useForm()

const addRef = ref()
const isAdd = ref(true)
const isIndex = ref(true)
const detail = ref<any>({})
const xGrid = ref<VxeGridInstance<IRowV0>>()

const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()

async function getData() {
    gridOptions.loading = true
    getMemberLevelList({
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        size: gridOptions.pagerConfig.pageSize,
    }).then((res: any) => {
        gridOptions.pagerConfig.total = res.total ?? 0
        gridOptions.data = res?.records ?? []
        gridOptions.loading = false
    })
}

function reset() {
    form.value = {
        levelName: '',
    }
    getData()
}

function doAdd() {
    isAdd.value = true
    isIndex.value = false
}

function doNext(row: any) {
    detail.value = cloneDeep(row)
    isIndex.value = false
    isAdd.value = false
}

async function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            doNext(row)
            break
        case 'config':
            doNext(row)
            await nextTick()
            addRef.value.doConfig()
            break
        case 'delete':
            memberLevelHttp('delete', row.levelId).then(() => {
                getData()
            })
            break
        default:
            break
    }
}

async function changeStatus(row: any) {
    memberLevelUpdateStatus(row.levelId).then(() => {
        getData()
    }).catch((message: any) => {
        ElMessage({ message, type: 'info' })
    })
}
</script>

<template>
    <template v-if="isIndex">
        <ElCard class="mb-20">
            <PlusForm v-model="form"
                      :row-props="{ gutter: 20 }"
                      :columns="schema"
            >
                <template #footer>
                    <div class="ml-auto">
                        <ElButton type="primary"
                                  @click="getData"
                        >
                            查询
                        </ElButton>

                        <ElButton @click="reset">
                            重置
                        </ElButton>
                    </div>
                </template>
            </PlusForm>
        </ElCard>

        <ElCard>
            <ElRow class="mb-20">
                <ElCol :span="12"
                       text-16
                       fw-700
                >
                    等级列表
                </ElCol>

                <ElCol :span="12"
                       style="text-align: right;"
                >
                    <ElButton type="primary"
                              @click="doAdd"
                    >
                        + 新建
                    </ElButton>
                </ElCol>
            </ElRow>
            <!-- 列表 -->
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #growth="{ row }">
                    <span>
                        {{ row.levelGrowth }}
                        <span style="position: relative;top: -2px;"> - </span>
                        {{ row?.levelNextGrowth || '以上' }}
                    </span>
                </template>

                <template #levelNo="{ row }">
                    <span style="color: #ffad08;">
                        LV{{ row.levelNo }}
                    </span>
                </template>

                <template #status="{ row }">
                    <div style="cursor: pointer;"
                         @click="changeStatus(row)"
                    >
                        <el-switch v-model="row.status"
                                   :active-value="1"
                                   :inactive-value="0"
                                   style="pointer-events: none;"
                        />
                    </div>
                </template>

                <template #operate="{ row }">
                    <ButtonItem :btns="btns"
                                @btn-click="doAction($event, row)"
                    />
                </template>
            </vxe-grid>
        </ElCard>
    </template>

    <AddItem v-else
             ref="addRef"
             v-model="isIndex"
             :data="detail"
             :is-add="isAdd"
             @confirm="getData"
    />
</template>
